CSS @media: Edistyneet mediakyselymallit aidosti responsiiviseen verkkosuunnitteluun

Nykyaikaisen web-kehityksen dynaamisessa kentässä kokemusten luominen, jotka mukautuvat saumattomasti alati laajenevaan laite- ja käyttäjäkontekstien joukkoon, ei ole vain paras käytäntö – se on välttämättömyys. Korkearesoluutioisista pöytäkoneiden näytöistä pienikokoisiin älypuhelimiin, vilkkaiden kaupunkikeskusten nopean internetin käyttäjistä syrjäseutujen rajallisen kaistanleveyden käyttäjiin ja tummia teemoja suosivista henkilöistä niihin, jotka tarvitsevat vähemmän liikettä – verkon on oltava joustava. Tässä CSS @media -säännöt, responsiivisen suunnittelun kulmakivi, ylittävät peruskäyttönsä ja muuttuvat tehokkaiksi työkaluiksi edistyneeseen mukautuvuuteen.

Vaikka monet kehittäjät tuntevat @media-sääntöjen käytön yksinkertaisissa keskeytyskohdissa, niiden todellinen voima piilee edistyneissä malleissa, loogisissa operaattoreissa ja kyvyssä hyödyntää käyttäjän ja ympäristön asetuksia. Tämä kattava opas vie sinut perusteiden tuolle puolen ja tutkii edistyneiden mediakyselyominaisuuksien monimutkaista maailmaa, joka mahdollistaa todella kestävien, osallistavien ja maailmanlaajuisesti saavutettavien verkkosovellusten luomisen.

Syvennymme tekniikoihin, jotka antavat suunnitelmiesi reagoida paitsi näytön kokoon, myös laitteen ominaisuuksiin, käyttäjän saavutettavuusasetuksiin ja jopa ympäröivään ympäristöön, varmistaen ylivoimaisen kokemuksen jokaiselle käyttäjälle kaikkialla.

Perusta: Lyhyt kertaus @media-syntaksin perusteista

Ennen kuin sukellamme edistyneisiin malleihin, kerrataan nopeasti perusta. Perusmediakysely koostuu valinnaisesta mediatyypistä (kuten screen, print, all) ja yhdestä tai useammasta mediaominaisuudesta (kuten min-width, orientation). @media-lohkon sisällä olevat tyylit otetaan käyttöön vain, jos ehdot täyttyvät.

            /* Perusesimerkki: Tyylit ovat voimassa vain näytöillä, jotka ovat leveämpiä kuin 768px */
@media screen and (min-width: 768px) {
  body {
    padding: 20px;
  }
}

/* Tyylit ovat voimassa vain sivua tulostettaessa */
@media print {
  nav {
    display: none;
  }
}

            

              
                Copy
              
            
          

Tämä perusymmärrys on ratkaisevan tärkeä, sillä edistyneet mallit rakentuvat suoraan sen päälle.

Keskeytyskohtien tuolla puolen: Mediakyselyominaisuuksien ymmärtäminen

Vaikka width ja height ovat yleisimmin käytettyjä mediaominaisuuksia, monet muut ominaisuudet mahdollistavat paljon vivahteikkaampia suunnittelupäätöksiä. Näiden ominaisuuksien ymmärtäminen on avainasemassa, kun halutaan siirtyä geneeristen mobiili/tabletti/työpöytä-asettelujen ulkopuolelle.

Näkymäaluepohjaiset ominaisuudet (tavalliset epäillyt ja enemmän)

Nämä ominaisuudet liittyvät selaimen näkymäalueen mittoihin ja ominaisuuksiin, eivät fyysisen laitteen näyttöön.

• width, height, min-width, max-width, min-height, max-height: Nämä ovat responsiivisen suunnittelun perusta. Niiden avulla voit määritellä keskeytyskohtia selaimen näkyvän alueen perusteella. Voit esimerkiksi muuttaa yksisarakkeisen asettelun monisarakkeiseksi, kun min-width saavuttaa tietyn pikseliarvon.

            /* Ota käyttöön kaksisarakkeinen asettelu leveämmillä näytöillä */
@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

• aspect-ratio, min-aspect-ratio, max-aspect-ratio: Nämä ominaisuudet mahdollistavat suunnittelun kohdistamisen näkymäalueen leveyden ja korkeuden suhteen perusteella. Tämä on uskomattoman hyödyllistä sisällön optimoinnissa erilaisille näyttömuodoille, ultraleveistä näytöistä korkeisiin älypuhelimiin.

            /* Optimoi sankarikuvitus ultraleveille näytöille (esim. 21/9) */
@media (min-aspect-ratio: 16/9) {
  .hero-banner {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

            

              
                Copy
              
            
          

• orientation: Tämä ominaisuus tunnistaa, onko näkymäalue portrait-tilassa (korkeus on suurempi tai yhtä suuri kuin leveys) vai landscape-tilassa (leveys on suurempi kuin korkeus). Se on erityisen tärkeä mobiili- ja tablettikokemuksissa.

            /* Säädä asettelua tablettien vaakatilassa */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

            

              
                Copy
              
            
          

Laitepohjaiset ominaisuudet (harvinaisempia, mutta hyödyllisiä)

Nämä ominaisuudet liittyvät fyysisen tulostuslaitteen ominaisuuksiin. Vaikka näkymäaluepohjaiset kyselyt ovat yleensä parempia sisällön asetteluun, laitepohjaisilla ominaisuuksilla on omat erityiset käyttökohteensa.

• device-width, device-height (ja niiden min/max-muunnelmat): Historiallisesti näitä käytettiin tiettyjen laitteiden resoluutioiden kohdistamiseen. Vaihtelevien selainikkunoiden kokojen vuoksi työpöydillä ja tableteilla sekä erilaisten pikselitiheyksien takia näihin luottaminen yleisessä asettelussa voi olla epäluotettavaa. Näkymäalueen mitat ovat lähes aina sopivampia. Niitä voidaan harkita hyvin kapeissa erikoistapauksissa, kuten sovelluksissa, jotka on suunniteltu erityisesti kiinteän kokoisille näytöille, kuten kioskeille, mutta nämä ovat harvinaisia tyypillisessä web-kehityksessä.
• resolution: Tämän ominaisuuden avulla voit kohdistaa näyttöihin niiden pikselitiheyden (DPI tai DPX – pistettä per pikseli) perusteella. Tämä on ratkaisevan tärkeää korkealaatuisten kuvien tarjoamisessa "Retina"- tai korkean DPI:n näytöille ilman tarpeettoman suurten tiedostojen toimittamista tavallisille näytöille.

            /* Tarjoa korkeamman resoluution taustakuva korkean DPI:n näytöille */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

            

              
                Copy
              
            
          

Huomaa sekä dpi:n että dppx:n käyttö eri selainten tulkintojen kattamiseksi ja koodin tulevaisuudenkestävyyden varmistamiseksi. dppx (pistettä per pikseliyksikkö) on yleensä suositeltavampi, koska se on laiteriippumattomampi.

Loogiset operaattorit: Ehtojen yhdistäminen tarkasti

Todella hienostuneiden mediakyselyiden rakentamiseksi sinun on yhdistettävä useita ehtoja loogisilla operaattoreilla. Näiden avulla voit määrittää tarkasti, milloin tietyt tyylit otetaan käyttöön.

`and`-operaattori: Kaikkien ehtojen on oltava tosia

and-avainsana yhdistää useita mediaominaisuuksia tai mediatyyppejä ja ominaisuuksia. Kaikkien määriteltyjen ehtojen on oltava tosia, jotta tyylit otetaan käyttöön.

            /* Sovella tyylejä vain näytöillä, joiden leveys on 768px ja 1024px välillä */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    order: 2;
  }
  .main-content {
    width: 70%;
  }
}

            

              
                Copy
              
            
          

Tämä on erittäin hyödyllistä tiettyjen laitealueiden, kuten tablettien pystytilassa, kohdistamiseen tai erittäin räätälöityjen asettelujen luomiseen hyvin tietyille näytön mitoille.

`or`-operaattori (`, ` pilkulla erotettu): Mikä tahansa ehto voi olla tosi

CSS:n @media-säännöissä pilkku (`,`) toimii loogisena TAI-operaattorina. Jos jokin pilkulla erotetuista mediakyselyistä on tosi, siihen liittyvät tyylit otetaan käyttöön.

            /* Tyylit otetaan käyttöön, jos näyttö on leveämpi kuin 1200px TAI jos laite on vaakatilassa (leveydestä riippumatta) */
@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  .header-nav {
    display: flex;
    flex-direction: row;
  }
}

/* Tyylit otetaan käyttöön tulostusmediassa TAI näytöillä, joilla on vähimmäisresoluutio */
@media print, (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast; /* Parempi tulostus/korkean resoluution renderöinti */
  }
}

            

              
                Copy
              
            
          

Tämä tehokas ominaisuus mahdollistaa tyylien ryhmittelyn, joiden tulisi päteä useissa erillisissä olosuhteissa, mikä johtaa tiiviimpiin ja luettavampiin tyylitiedostoihin.

`not`-operaattori: Ehdon kääntäminen

not-avainsana kieltää koko mediakyselyn, mikä tarkoittaa, että tyylit otetaan käyttöön, jos määritetty ehto ei täyty.

            /* Sovella tyylejä kaikkiin mediatyyppeihin PAITSI tulostukseen */
@media not print {
  .interactive-element {
    cursor: pointer;
  }
}

/* Sovella tyylejä, jos se EI OLE näyttö, jonka minimileveys on 768px (ts. tulostukselle tai alle 768px leveille näytöille) */
@media not screen and (min-width: 768px) {
  .desktop-only-feature {
    display: none;
  }
}

            

              
                Copy
              
            
          

not-operaattori voi olla hankala ja sitä tulisi käyttää harkitusti. Varmista, että ymmärrät, mitä tarkalleen ottaen kielletään. Esimerkiksi @media not screen and (min-width: 768px) tarkoittaa "ei näyttö JA min-width 768px", mikä on loogisesti vastaava kuin "jos se ei ole näyttö TAI jos se on näyttö JA max-width on alle 768px". On usein selkeämpää käyttää max-width:a not min-width:n sijaan.

`only`-avainsana: Taaksepäin yhteensopivuuden varmistaminen (historiallinen konteksti)

only-avainsana otettiin käyttöön piilottamaan tyylitiedostoja vanhemmilta selaimilta, jotka eivät täysin tukeneet mediakyselyitä. Jos vanhempi selain kohtasi @media only screen, se yleensä jätti säännön huomiotta, koska se ei tunnistanut only-sanaa kelvolliseksi mediatyypiksi. Nykyaikaiset selaimet jäsentävät sen oikein. Koska mediakyselyiden tuki selaimissa on nykyään laajaa, only on suurelta osin tarpeeton uudessa kehityksessä, mutta sitä saattaa nähdä vanhoissa koodikannoissa.

            /* Esimerkki: Tyylejä sovelletaan vain näytöillä, piilotettu hyvin vanhoilta selaimilta */
@media only screen and (min-width: 992px) {
  .some-component {
    padding: 30px;
  }
}

            

              
                Copy
              
            
          

Käyttäjäasetusten mediaominaisuudet: Osallistavuuden ja saavutettavuuden omaksuminen

Nämä ovat ehkä jännittävimpiä ja vaikuttavimpia edistyneitä mediakyselyominaisuuksia, sillä ne antavat kehittäjille mahdollisuuden reagoida suoraan käyttäjien käyttöjärjestelmän tai selaimen tason asetuksiin, mikä johtaa huomattavasti saavutettavampiin ja käyttäjäystävällisempiin kokemuksiin. Tämä on erityisen tärkeää globaalille yleisölle, jolla on moninaisia tarpeita ja ympäristöjä.

prefers-color-scheme: Vaalea ja tumma tila

Tämä ominaisuus tunnistaa, onko käyttäjä pyytänyt vaaleaa vai tummaa väriteemaa käyttöjärjestelmälleen tai selaimelleen. Tumman tilan toteuttaminen parantaa merkittävästi saavutettavuutta ja mukavuutta erityisesti hämärässä tai valoherkille käyttäjille.

• no-preference: Käyttäjä ei ole ilmoittanut asetusta.
• light: Käyttäjä suosii vaaleaa teemaa.
• dark: Käyttäjä suosii tummaa teemaa.

            /* Oletusteema (vaalea) */
body {
  background-color: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  a {
    color: #66ccff;
  }
}

            

              
                Copy
              
            
          

Vankempia tumman tilan toteutuksia varten CSS:n mukautetut ominaisuudet (muuttujat) ovat korvaamattomia, sillä ne mahdollistavat väripalettien dynaamisen määrittelyn.

prefers-reduced-motion: Käyttäjän mukavuuden kunnioittaminen

Animaatiot ja siirtymät voivat parantaa käyttäjäkokemusta, mutta joillekin henkilöille (esim. niille, joilla on vestibulaarisia häiriöitä, ADHD tai jotka yksinkertaisesti kokevat liikkeen häiritsevänä) ne voivat aiheuttaa epämukavuutta tai jopa pahoinvointia. Tämä ominaisuus tunnistaa, onko käyttäjä pyytänyt mahdollisimman vähän ei-välttämättömiä animaatioita.

• no-preference: Asetusta ei ole ilmoitettu.
• reduce: Käyttäjä suosii vähennettyä liikettä.

            /* Oletusanimaatio */
.animated-element {
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
  .hero-carousel {
    scroll-behavior: auto; /* Poista sulava vieritys käytöstä */
  }
}

            

              
                Copy
              
            
          

On vahva saavutettavuuden paras käytäntö tarjota aina vaihtoehto vähennetyllä liikkeellä. Tämä auttaa rakentamaan verkon, joka on käyttökelpoinen ja mukava kaikille, riippumatta heidän yksilöllisistä herkkyyksistään.

prefers-contrast: Visuaalisen kontrastin säätäminen

Tämä ominaisuus tunnistaa, onko käyttäjä pyytänyt tiettyä kontrastitasoa käyttöjärjestelmälleen. Tämä on erittäin hyödyllistä käyttäjille, joilla on heikko näkö tai tiettyjä värinäön puutteita.

• no-preference: Ei asetusta.
• less: Käyttäjä suosii vähemmän kontrastia.
• more: Käyttäjä suosii enemmän kontrastia.
• custom: Käyttäjällä on mukautettu kontrastiasetus (harvinaisempi).

            /* Tyylit korkeammalle kontrastille */
@media (prefers-contrast: more) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
  button {
    border: 2px solid #FFFFFF;
    background-color: #333333;
    color: #FFFFFF;
  }
}

            

              
                Copy
              
            
          

Tarjoamalla tyylejä eri kontrastiasetuksille edistät aktiivisesti saavutettavampaa ja osallistavampaa digitaalista ympäristöä käyttäjille maailmanlaajuisesti.

forced-colors: Järjestelmän pakottamien väripalettien käsittely

Kun käyttöjärjestelmä (kuten Windowsin suurikontrastitila) pakottaa tietyn väripaletin sovelluksiin, se voi joskus ohittaa tai rikkoa mukautettuja verkkosuunnitelmia. forced-colors-mediaominaisuus auttaa kehittäjiä sopeutumaan tähän tilanteeseen, jolloin he voivat tarjota tyylejä, jotka toimivat hyvin pakotettujen värien rajoitusten sisällä.

• active: Selainagentilla on aktiivinen pakotettujen värien tila.
• none: Pakotettujen värien tila ei ole aktiivinen.

            /* Säädöt suurikontrastitilan käyttäjille */
@media (forced-colors: active) {
  /* Varmista, että elementeillä on näkyvät reunukset */
  button, input[type="submit"] {
    border: 1px solid currentColor;
    background-color: transparent;
    color: HighlightText;
  }
  /* Poista taustakuvat, jotka saattavat peittää tekstin */
  .icon {
    background-image: none;
    border: 1px solid currentColor; /* Tee niistä näkyviä */
  }
}

            

              
                Copy
              
            
          

Tämä ominaisuus on elintärkeä saavutettavuusstandardien (kuten WCAG) noudattamisen varmistamiseksi ja toimivan kokemuksen tarjoamiseksi käyttäjille, jotka luottavat näihin järjestelmätason säätöihin.

Ympäristön mediaominaisuudet: Mukautuminen laitteen ominaisuuksiin

Nämä mediaominaisuudet antavat sinun räätälöidä kokemuksia sen perusteella, miten käyttäjä on vuorovaikutuksessa laitteensa kanssa, kuten millaista osoitinlaitetta he käyttävät tai mitkä ovat heidän näyttönsä ominaisuudet.

hover ja any-hover: Osoitinlaitteiden erottaminen

Nämä ominaisuudet auttavat erottamaan laitteet, jotka tukevat hiiren leijutusta (esim. työpöydät hiirellä), ja ne, jotka käyttävät pääasiassa kosketusta (esim. älypuhelimet, tabletit). Tämä on ratkaisevan tärkeää turhauttavien käyttöliittymämallien välttämiseksi vain kosketuslaitteilla.

• hover: Viittaa ensisijaiseen syöttömekanismiin.
• any-hover: Viittaa mihin tahansa saatavilla olevaan syöttömekanismiin.
• Arvot: none (ei hover-tukea), hover (hover-tuki).

            /* Näytä työkaluvihjeet vain laitteilla, joissa on hover-ominaisuus */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* Kosketuslaitteilla työkaluvihjeet voidaan laukaista fokuksella tai niitä ei näytetä lainkaan */
  .tooltip-trigger:hover .tooltip-content {
    opacity: 0;
    visibility: hidden;
  }
  .touch-friendly-info-icon {
    display: block;
  }
}

            

              
                Copy
              
            
          

any-hover:n käyttö on usein vankempaa, koska laitteella voi olla sekä kosketus- että hiirisyöte (esim. 2-in-1-kannettava). Jos any-hover on hover, ainakin yksi syöttötapa tukee leijutusta. Jos any-hover on none, mikään syöttötapa ei tue leijutusta.

pointer ja any-pointer: Osoittimen tarkkuuden erottaminen

Nämä ominaisuudet tunnistavat ensisijaisen (pointer) tai minkä tahansa saatavilla olevan (any-pointer) osoitinlaitteen tarkkuuden.

• none: Ei osoitinlaitetta.
• coarse: Epätarkka osoitinlaite (esim. sormi kosketusnäytöllä).
• fine: Tarkka osoitinlaite (esim. hiiri, kynä).

            /* Suurenna napautuskohteiden kokoa karkeille osoittimille */
@media (pointer: coarse) {
  button, .tap-area {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* Pienennä pehmustetta tarkoille osoittimille */
@media (pointer: fine) {
  button, .tap-area {
    padding: 8px;
  }
}

            

              
                Copy
              
            
          

Tämä on ratkaisevan tärkeää kosketusystävällisten käyttöliittymien suunnittelussa, joissa napautuskohteiden on oltava riittävän suuria sormisyötteelle, samalla kun mahdollistetaan tiiviimpi suunnittelu, kun tarkka hiirivuorovaikutus on käytettävissä. Tämä vaikuttaa suoraan käytettävyyteen monenlaisilla laitteilla ja käyttäjäkyvyillä, erityisesti globaaleilla markkinoilla, joilla kosketuslaitteet ovat yleisiä.

color-gamut: sRGB:n tuolla puolen

color-gamut-mediaominaisuuden avulla voit tunnistaa, tukeeko käyttäjän näyttö laajempaa väriavaruutta kuin standardi sRGB (esim. P3 tai Rec. 2020). Tämä antaa suunnittelijoille mahdollisuuden käyttää rikkaampaa ja eloisampaa väripalettia yhteensopivilla näytöillä.

• srgb: Standardi sRGB-väriavaruus.
• p3: Näyttö tukee P3-väriavaruutta (laajempi kuin sRGB).
• rec2020: Näyttö tukee Rec. 2020 -väriavaruutta (vielä laajempi).

            /* Käytä P3-värejä eloisampiin brändielementteihin yhteensopivilla näytöillä */
@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 0.96 0.28 0.21); /* Eloisa punainen P3-väriavaruudessa */
  }
}

            

              
                Copy
              
            
          

Vaikka tämä ominaisuus on vielä uusi, se viittaa tulevaisuuteen, jossa verkkokokemukset ovat visuaalisesti upeampia ja tarkempia, erityisesti luovilla aloilla tai korkealaatuisen sisällön toimittamisessa.

update: Näytön virkistystaajuuksien käsittely

Tämä ominaisuus ilmaisee, kuinka nopeasti tulostuslaite voi muuttaa sisällön ulkonäköä. Tämä on hyödyllistä animaatioiden ja dynaamisen sisällön optimoinnissa erilaisille näyttötyypeille.

• none: Ei voi päivittää (esim. tulostettu asiakirja).
• slow: Päivittyy hitaasti (esim. e-muste-näytöt, jotkin vanhemmat laitteet).
• fast: Päivittyy nopeasti (esim. tyypilliset tietokoneen näytöt, älypuhelimet).

            /* Vähennä monimutkaisia animaatioita hitaasti päivittyvillä näytöillä */
@media (update: slow) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  .video-background {
    display: none;
  }
}

            

              
                Copy
              
            
          

Tämä ominaisuus auttaa varmistamaan, että käyttäjät laitteilla, kuten e-lukijoilla, jotka priorisoivat akun kestoa ja staattista näyttöä, eivät saa heikentynyttä tai nykivää kokemusta sopimattomien animaatioiden vuoksi.

Edistyneet tekniikat ja parhaat käytännöt

Yksittäisten mediaominaisuuksien lisäksi se, miten rakennat CSS:si ja yhdistät näitä malleja, voi vaikuttaa merkittävästi ylläpidettävyyteen, suorituskykyyn ja yleiseen suunnittelun laatuun.

Mobiili edellä vs. työpöytä edellä: Strateginen valinta

Valinta mobiili edellä- ja työpöytä edellä -lähestymistavan välillä on perustavanlaatuinen responsiivisen suunnittelun strategiassa.

• Mobiili edellä (min-width):
  • Aloita suunnittelu ja tyylittely pienimmälle näytölle (mobiili).
  • Käytä min-width-mediakyselyitä lisätäksesi asteittain tyylejä suuremmille näytöille.
  • Edut:
    • Suorituskyky: Mobiililaitteilla on usein vähemmän prosessointitehoa ja hitaammat internetyhteydet. Mobiili edellä -lähestymistapa varmistaa, että vain tarvittavat tyylit ladataan aluksi, mikä johtaa nopeampiin sivujen latausaikoihin. Tämä on kriittistä käyttäjille alueilla, joilla on kehittyvä internet-infrastruktuuri.
    • Progressiivinen parantaminen: Rakennat vankasta peruskokemuksesta ja lisäät parannuksia kykenevämmille laitteille.
    • Fokus: Kannustaa kehittäjiä priorisoimaan olennaista sisältöä ja toiminnallisuutta.
• Työpöytä edellä (max-width):
  • Aloita suunnittelu suurille näytöille (työpöytä).
  • Käytä max-width-mediakyselyitä ohittaaksesi tyylejä pienemmille näytöille.
  • Edut: Voi olla helpompaa tiimeille, jotka ovat tottuneet perinteiseen työpöytäsuunnitteluun, mutta johtaa usein monimutkaisempiin ohituksiin mobiililaitteille.

Useimmissa nykyaikaisissa projekteissa, erityisesti niissä, jotka kohdistuvat globaaliin yleisöön, jolla on monipuoliset laiteominaisuudet ja verkkoolosuhteet, mobiili edellä -lähestymistapa on vahvasti suositeltava.

            /* Mobiili edellä -lähestymistapa: Pienen näytön tyylit ovat oletusarvoisia */
.container {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Tablettikohtaiset tyylit */
  .container {
    width: 700px;
  }
}

@media (min-width: 1200px) {
  /* Työpöytäkohtaiset tyylit */
  .container {
    width: 1100px;
  }
}

            

              
                Copy
              
            
          

CSS:n mukautettujen ominaisuuksien (muuttujien) käyttö mediakyselyiden kanssa

CSS:n mukautettujen ominaisuuksien (muuttujien) yhdistäminen mediakyselyihin on mullistava tapa ylläpitää suuria, responsiivisia tyylitiedostoja. Sen sijaan, että toistaisit arvoja, määrittelet ne kerran ja muutat niiden arvoja mediakyselyiden sisällä.

            /* Määritä oletusarvot (mobiili) */
:root {
  --primary-font-size: 16px;
  --spacing-unit: 1rem;
  --grid-columns: 1;
}

/* Säädä arvot tablettinäytöille */
@media (min-width: 768px) {
  :root {
    --primary-font-size: 18px;
    --spacing-unit: 1.5rem;
    --grid-columns: 2;
  }
}

/* Säädä arvot työpöytänäytöille */
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 20px;
    --spacing-unit: 2rem;
    --grid-columns: 3;
  }
}

/* Käytä muuttujia koko CSS-tiedostossasi */
body {
  font-size: var(--primary-font-size);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--spacing-unit);
}
```

/* Sovella tyylejä näytöille, joiden leveys on 600px ja 900px välillä */
@media (600px <= width <= 900px) {
  .promo-box {
    flex-direction: column;
  }
}

/* Vastaava perinteisellä syntaksilla */
@media (min-width: 600px) and (max-width: 900px) {
  .promo-box {
    flex-direction: column;
  }
}
```

@media print {
  /* Piilota ei-välttämättömät elementit tulostuksesta */
  nav, footer, .sidebar, .ads {
    display: none;
  }

  /* Varmista, että teksti on mustaa valkoisella luettavuuden vuoksi */
  body {
    color: #000 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* Näytä linkkien täydelliset URL-osoitteet */
  a:link:after, a:visited:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Varmista asianmukaiset sivunvaihdot */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

            /* Mobiili edellä: Oletuksena piilotettu, näytön ulkopuolinen valikko */
.main-nav {
  display: none;
}

.mobile-menu-toggle {
  display: block;
}

/* Tabletti ja työpöytä: Näytä vaakasuora valikko */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .mobile-menu-toggle {
    display: none;
  }
}

/* Lisäsäädöt hyvin leveille näytöille tai tietyille kuvasuhteille */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .main-nav li {
    padding: 0 25px;
  }
}

            

              
                Copy
              
            
          

            /* Oletus (mobiili/matala resoluutio) taustakuva */
.hero-section {
  background-image: url('hero-small.jpg');
  background-size: cover;
  background-position: center;
}

/* Keskikokoinen resoluutio/työpöydän taustakuva */
@media (min-width: 768px) {
  .hero-section {
    background-image: url('hero-medium.jpg');
  }
}

/* Korkean DPI:n (Retina) erityinen taustakuva */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('hero-large@2x.jpg');
  }
}

            

              
                Copy
              
            
          

            /* Joustava typografia käyttäen calc() ja clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

/* Säädä ruudukkoa vaakatilassa oleville tableteille, suosien useampia sarakkeita */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Säädä fontin painoa korkean kontrastin tilassa paremman luettavuuden vuoksi */
@media (prefers-contrast: more) {
  p, li {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

            /* Keskitetyt värimuuttujat, mukautuvat vaaleaan/tummaan tilaan */
:root {
  --background-color: #f0f0f0;
  --text-color: #333333;
  --link-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --text-color: #e0e0e0;
    --link-color: #88bbff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Vähennä animaatioita, jos käyttäjä niin haluaa */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Säädöt pakotettujen värien tilaan */
@media (forced-colors: active) {
  .custom-button {
    border: 1px solid Highlight; /* Varmista, että painikkeiden reunat ovat näkyvissä */
    background-color: Canvas;
    color: CanvasText;
  }
}

            

              
                Copy
              
            
          

            /* Esimerkki tulevasta konttikyselystä */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

            

              
                Copy